<template>
 <div class="banner">
  <img :src="banner" alt="">

  <div class="mainContent">
   <h1>{{ $t('custody.banner.title') }}</h1>
   <p v-html="$t('custody.banner.text')"></p>

   <el-button type="primary" @click="receipt">{{ $t('custody.banner.button') }}</el-button>
  </div>
 </div>
</template>

<script>
export default {
 name: "Banner",
 data: () => ({
  banner: require('@/assets/custody-banner.png')
 }),
 methods: {
  // 提交监护权收据
  receipt() {
   this.$alert(this.$t('custody.alert.content'), this.$t('custody.alert.title'), {
    confirmButtonText: this.$t('custody.alert.confirm'),
    callback: action => {}
   });
  }
 }
}
</script>

<style scoped lang="scss">
.banner {
 position: relative;
 width: 100%;
 background: linear-gradient(0deg, #2343a3, #1da8d6);
 display: flex;
 justify-content: center;
 align-items: center;

 .mainContent {
  display: flex;
  flex-direction: column;
  max-width: 935px;
  width: 95%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);

  h1 {
   font-size: 48px;
   color: #fff;
   padding-bottom: 40px;
  }

  p {
   color: #ffff;
   width: 460px;
   font-size: 24px;
  }

  .el-button {
   height: 42px;
   margin-right: auto;
   margin-top: 30px;
   background-color: #0c35aa;
   border: none;
   font-weight: bold;
   font-size: 18px;
  }
 }

 img {
  display: block;
  max-width: 1920px;
  width: 100%;
 }
}
</style>
<style lang="scss">
.el-message-box__wrapper {
 .el-message-box {
  .el-message-box__header {
   .el-message-box__title {
    font-size: 17px;
   }
  }

  .el-message-box__btns {
   .el-button {
    color: #fff;
    background-color: #0d4fa5;
    border-color: #0d4fa5;
   }
  }
 }
}
</style>
